<template>
    <div class="post-list">
        <article class="card mb-shahow-sm" v-for="post in posts" :key="post._id">
            <div class="card-body">
                <h4><router-link :to="`/posts/${post._id}`">{{ post.title }}</router-link></h4>
                <div class="row align-items-center my-3">
                    <div v-if="post.image && typeof post.image != 'string'" class="col-4">
                        <img :src="post.image.fitUrl" :alt="post.title" class="rounded-lg w-50">
                    </div>
                    <p :class="{ 'col-8': post.image }">{{ post.excerpt }}</p>
                </div>
                <span class="text-muted">{{ post.createdAt }}</span>
            </div>
        </article>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { PostProps, ImageProps } from '../store';
import { generateFitUrl } from '@/hooks/helper';

export default defineComponent({
    props: {
        // 文章的列表
        list: {
            type: Array as PropType<PostProps[]>,
            required: true
        }
    },
    setup(props) {
        const posts = computed(() => {
            return props.list.map(post => {
                generateFitUrl(post.image as ImageProps, 200, 110, ['m-fill'])
                return post
            })
        })
        return {
            posts
        }
    },
})
</script>
